<template>
	<view class="pagesDoctorHome">
		<view class="badgeBox">
			<view class="badgeItem" @click="toDataList(1,'任务池')">
				<view class="badgeItem_flex">
					<u--image :src="taskPoolIcon" width="80rpx" height="80rpx"></u--image>
					<view class="title">
						任务池
					</view>
				</view>
				<view :class="[taskPoolCount > 0 ? 'redClass' : 'normalClass']" class="badgeItem_num">
					{{ taskPoolCount > 0 ? taskPoolCount : 0 }}
					<text class="badgeItem_num_unit">/例</text>
				</view>
			</view>
			<view class="badgeItem" @click="toDataList(2,'待会诊')">
				<view class="badgeItem_flex">
					<u--image :src="myIssuesIcon" width="80rpx" height="80rpx"></u--image>
					<view class="title">
						待会诊
					</view>
				</view>
				<view :class="[myIssuesCount > 0 ? 'redClass' : 'normalClass']" class="badgeItem_num">
					{{ myIssuesCount > 0 ? myIssuesCount : 0 }}
					<text class="badgeItem_num_unit">/例</text>
				</view>
			</view>
			<view class="badgeItem" @click="toDataList(3,'我的邀请')">
				<view class="badgeItem_flex">
					<u--image :src="myInvitedIcon" width="80rpx" height="80rpx"></u--image>
					<view class="title">
						我的邀请
					</view>
				</view>
				<view :class="[myInvitedCount > 0 ? 'redClass' : 'normalClass']" class="badgeItem_num">
					{{ myInvitedCount > 0 ? myInvitedCount : 0 }}
					<text class="badgeItem_num_unit">/例</text>
				</view>
			</view>
			<view class="badgeItem" @click="toDataList(4,'已完成')">
				<view class="badgeItem_flex">
					<u--image :src="myFinishIcon" width="80rpx" height="80rpx"></u--image>
					<view class="title">
						已完成
					</view>
				</view>
				<view :class="[myFinishCount > 0 ? 'blueClass' : 'normalClass']" class="badgeItem_num">
					{{ myFinishCount > 0 ? myFinishCount : 0 }}
					<text class="badgeItem_num_unit">/例</text>
				</view>
			</view>
			<view class="badgeItem" @click="toDataList(5,'我的终审')" v-if="isFinalDoctor">
				<view class="badgeItem_flex">
					<u--image :src="myFinishIcon" width="80rpx" height="80rpx"></u--image>
					<view class="title">
						我的终审
					</view>
				</view>
				<view :class="[myFinalCount > 0 ? 'blueClass' : 'normalClass']" class="badgeItem_num">
					{{ myFinalCount > 0 ? myFinalCount : 0 }}
					<text class="badgeItem_num_unit">/例</text>
				</view>
			</view>
			<!-- <view class="badgeItem" @click="goAddFinish">
				<view class="badgeItem_flex">
					<u--image :src="extraProjectIcon" width="80rpx" height="80rpx"></u--image>
					<view class="title">
						加做完成
					</view>
				</view>
				<view :class="[extraProjectMessageList.length > 0 ? 'blueClass' : 'normalClass']" class="badgeItem_num">
					{{ extraProjectMessageList.length > 0 ? extraProjectMessageList.length : 0 }}
					<text class="badgeItem_num_unit">/例</text>
				</view>
			</view> -->
		<!-- 	<view class="badgeItem" @click="goChat">
				<view class="badgeItem_flex">
					<u--image :src="noRead" width="80rpx" height="80rpx"></u--image>
					<view class="title">
						沟通未读
					</view>
				</view>
				<view :class="[totalNoreadnum > 0 ? 'redClass' : 'normalClass']" class="badgeItem_num">
					{{ totalNoreadnum }}
					<text class="badgeItem_num_unit">/条</text>
				</view>
			</view> -->

		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		getElBadge
	} from '@/api/platform/orders.js'
	import {
		getExtraProjectMessage
	} from '@/api/platform/extraProjectMessage.js'
	import {
		getUnReadMessageCount
	} from '@/api/platform/messageBoardController.js'
	export default {
		name: "doctorHome",
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				institutionInfo: state => state.user.institution
			}),
			isFinalDoctor() {
				return this.institutionInfo.finalExertId ?
					this.institutionInfo.finalExertId.includes(this.userInfo.id) :
					false
			}

		},
		data() {
			return {
				taskPoolCount: 0, //任务池角标
				myIssuesCount: 0, //医生待会诊角标
				myFinishCount: 0, //医生已会诊角标
				myInvitedCount: 0, //医生邀请角标
				myFinalCount: 0, //医生终审角标
				extraProjectMessageList: [], //加做列表
				totalNoreadnum: 0, //沟通未读角标
				taskPoolIcon: '/static/images/index/taskPoolIcon.png', //任务池角标
				myIssuesIcon: '/static/images/index/myIssuesIcon.png', //医生待会诊角标
				myFinishIcon: '/static/images/index/myFinishIcon.png', //医生已会诊角标
				myInvitedIcon: '/static/images/index/myInvitedIcon.png', //医生邀请角标
				myFinalIcon: '/static/images/index/myFinalIcon.png', //医生终审角标
				extraProjectIcon: '/static/images/index/extraProjectIcon.png', //医生终审角标
				noRead: '/static/images/index/noRead.png', //医生终审角标
				totalNoreadnum: 0,

			};
		},
		mounted() {
			console.log('this.userInfo', this.userInfo)
			this.getElBadge()
			// this.getExtraProjectMessage()
			// this.getUnReadMessageCount()

		},
		methods: {
			toDataList(id, title) {
				uni.navigateTo({
					url: `/subPackages/doctor/customerList/customerList?id=${id}&title=${title}`
				})
			},
			goAddFinish() {
				uni.navigateTo({
					url: `/subPackages/doctor/addFinish/addFinish`
				})
			},
			goChat() {
				uni.navigateTo({
					url: `/subPackages/doctor/chat/chat`
				})
			},
			getElBadge() {
				getElBadge().then(res => {
					console.log('getElBadge--', res)
					if (res.code == 200) {
						this.myFinishCount = res.listFindCompleted
						this.myIssuesCount = res.listFindForConsultation
						this.myInvitedCount = res.listFindMyInvitation
						this.myFinalCount = res.listFindMyFinal
						this.taskPoolCount = res.listTaskPool
					}
				})
			},
			getExtraProjectMessage() {
				getExtraProjectMessage(this.userInfo.id).then(res => {
					if (res.code == 200) {
						this.extraProjectMessageList = res.data
					}
				})
			},
			getUnReadMessageCount() {
				getUnReadMessageCount().then(res => {
					if (res.code == 200) {
						this.totalNoreadnum = res.data
					}
				})
			}

		}

	}
</script>

<style lang="scss" scoped>
	.pagesDoctorHome {
		padding-bottom:64rpx;
		.badgeBox {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
	
			.badgeItem {
				min-width: 280rpx;
				box-shadow: 2rpx 2rpx 8rpx 8rpx rgba(32,108,228,0.3);
				border-radius: 16rpx;
				opacity: 1;
				padding: 20rpx;
				margin:0rpx 20rpx;
				margin-top:80rpx;
				&_flex{
					display: flex;
					align-items: center;
					justify-content: center;
				}
				&_num{
					text-align: center;
					font-size:80rpx;
					height:100rpx;
					font-weight: 700;
					line-height:100rpx;
					&_unit{
						font-size:24rpx;
						color:#666;
					}
				}
			}
	
			.title {
				font-size: 30rpx;
				font-weight: 700;
				margin-left:32rpx;
	
			}
	
			.redClass {
				color: #fb0f0f;
			}
	
			.normalClass {
				color: #bdbdbd;
			}
	
			.blueClass {
				color: #0fa9fb;
			}
	
		}
	}
</style>